<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--当前页面用chrome内核来渲染。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--在iPhone的浏览器中页面将以原始大小显示，并不允许缩放  -->
    <title>图片加载平移放大缩小示例</title>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    .layui-form-select .layui-input{
      background: #031a34;
      border-color: #123776;
      color: #6eadff;
    }

    .layui-form-select .layui-input::-webkit-input-placeholder { /* WebKit browsers */

      　　color:#999;

    }

    .layui-form-select .layui-edge{
      border-top-color: #123776;
    }

  </style>
</head>

<body class="body-bg">
    @import "top.html"

    <div class="layui-fluid">
      <div class="layui-row layui-col-space10" >
        <div class="layui-col-lg3 layui-col-md3" >
            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                <span class="f-r c-p">更多预警</span>
                <i class="layui-icon layui-icon-next"></i> 物联网监控设备预警
              </div>
              <div class="layui-card-body">
                  <table class="layui-table table-box" lay-skin="line">
                      <colgroup>
                        <!-- <col width="150">
                        <col width="200"> -->
                        <col>
                      </colgroup>
                      <thead>
                        <tr>
                          <th>预警时间</th>
                          <th>设备地点</th>
                          <th>预警原因</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>2018/07/05</td>
                          <td>菱湖上品有限公司</td>
                          <td>土壤温度过高</td>
                        </tr>
                        <tr>
                            <td>2018/07/05</td>
                            <td>菱湖上品有限公司</td>
                            <td>土壤温度过高</td>
                          </tr>
                          <tr>
                            <td>2018/07/05</td>
                            <td>菱湖上品有限公司</td>
                            <td>土壤温度过高</td>
                          </tr>
                          <tr>
                            <td>2018/07/05</td>
                            <td>菱湖上品有限公司</td>
                            <td>土壤温度过高</td>
                          </tr>
                          <tr>
                            <td>2018/07/05</td>
                            <td>菱湖上品有限公司</td>
                            <td>土壤温度过高</td>
                          </tr>
                      </tbody>
                    </table>

              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>

            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                  <i class="layui-icon layui-icon-next"></i> 企业地貌
              </div>
              <div class="layui-card-body">
                  <table class="layui-table table-box landforms" >
                      <colgroup>
                        <!-- <col width="150">
                        <col width="200"> -->
                        <col>
                      </colgroup>
                      <!-- <thead>
                        <tr>
                          <th>预警时间</th>
                          <th>设备地点</th>
                          <th>预警原因</th>
                        </tr>
                      </thead> -->
                      <tbody>
                        <tr>
                          <td>
                             <span class="layui-col-lg6">
                               <div class="circle t-c">
                                  <i class="layui-icon layui-icon-app"></i>
                               </div>
                             </span>
                             <span class="layui-col-lg6 t-l">耕地面积<br/><em class="fnt-st">45亩</em></span>
                            </td>
                          <td>
                            <span class="layui-col-lg6">
                               <div class="circle t-c">
                                  <i class="layui-icon layui-icon-tree"></i>
                               </div>
                            </span>
                            <span class="layui-col-lg6 t-l">山体面积<br/><em class="fnt-st">2000亩</em></span>
                          </td>
                        </tr>
                        <tr>
                            <td>
                              <span class="layui-col-lg6">
                                <div class="circle t-c">
                                  <i class="layui-icon layui-icon-location"></i>
                               </div>
                              </span>
                              <span class="layui-col-lg6 t-l">地形地貌<br/><em class="fnt-st">山地地貌</em></span>
                            </td>
                            <td>
                              <span class="layui-col-lg6">
                                <div class="circle t-c">
                                  <i class="layui-icon layui-icon-picture"></i>
                               </div>
                              </span>
                              <span class="layui-col-lg6 t-l">海拔<br/><em class="fnt-st">99.51m</em></span>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <span class="layui-col-lg6">
                                <div class="circle t-c">
                                  <i class="layui-icon layui-icon-website"></i>
                               </div>
                              </span>
                              <span class="layui-col-lg6 t-l">经度<br/><em class="fnt-st">112.5343°</em></span>
                            </td>
                            <td>
                              <span class="layui-col-lg6">
                                <div class="circle t-c">
                                  <i class="layui-icon layui-icon-find-fill"></i>
                               </div>
                              </span>
                              <span class="layui-col-lg6 t-l">纬度<br/><em class="fnt-st">302611°</em></span>
                            </td>
                          </tr>
                      </tbody>
                    </table>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>
        </div>

        <div class="layui-col-lg6 layui-col-md6" >
            <div class="layui-card layui-card-se card-em">
              <div class="layui-card-header">
                  <span class="f-r c-p">更多视频</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-next"></i> 六号大棚视频
              </div>
              <div class="layui-card-body">
                <div class="map-center">
                  123123123123123123123123123123123123123123123123123123123123
                </div>
              </div>
            </div>
        </div>

        <div class="layui-col-lg3 layui-col-md3" >
            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                  <span class="f-r c-p">更多视频</span>
                <i class="layui-icon layui-icon-next"></i> 五号大棚视频
              </div>
              <div class="layui-card-body">
                   <div id="chart1" class="chart-box"></div>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>

            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                <span class="f-r c-p">更多视频</span>
                <i class="layui-icon layui-icon-next"></i> 六号大棚视频</div>
              <div class="layui-card-body">
                <div id="chart2" class="chart-box"></div>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>
        </div>
    </div>

    <div class="layui-row row-top">
        <div class="layui-card layui-card-se p-r">
          <div class="layui-card-header">

            <div class="layui-row row-line">
              <div class="f-r warn-tip">
                <span class="layui-inline"><img src="./images/status1.png" />&nbsp;&nbsp;&nbsp;&nbsp;正常设备</span>
                <span class="layui-inline"><img src="./images/status2.png" />&nbsp;&nbsp;&nbsp;&nbsp;设备异常提醒</span>
              </div>

              <i class="layui-icon layui-icon-next"></i> 传感器实时监测

              <div class="layui-inline">
                <form class="layui-form" action="">
                  <div class="layui-form-item item-bn">
                    <div class="layui-input-block">
                      <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">大棚A</option>
                        <option value="1">大棚B</option>
                        <option value="2">大棚C</option>
                        <option value="3">大棚D</option>
                        <option value="4">大棚E</option>
                      </select>
                    </div>
                  </div>
                </form>
              </div>
            </div>

          </div>
          <div class="layui-card-body">

            <div class="layui-container sensor">
              <h3>&nbsp;</h3>
              <div class="layui-row d-if">

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-spread-left"></i>
                  </div>
                  空气温度 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-tips"></i>
                  </div>
                  空气湿度(东) <br/>
                  <strong class="big-clr">56%RH</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-template-1"></i>
                  </div>
                  空气湿度(东) <br/>
                  <strong class="big-clr">30%RH</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-app"></i>
                  </div>
                  空气温度 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color sensor-hover">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-log"></i>
                  </div>
                  空气温度 <br/>
                  <strong class="big-clr clr-red">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-log"></i>
                  </div>
                  空气温度 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-log"></i>
                  </div>
                  空气温度 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>
              </div>
            </div>

          </div>
          <span class="corner-tl p-a"></span>
          <span class="corner-tr p-a"></span>
          <span class="corner-bl p-a"></span>
          <span class="corner-br p-a"></span>
        </div>
    </div>
    </div>


</body>
<script src="js/vendor/requirejs/require.js"></script>
<script src="js/require.config.js"></script>
<script src="js/app-data.js"></script>
</html>
